<template>
  <div id="root">
    <el-row>
      <el-col :span="9" class="root-left">
        <h2 style="text-align: center;margin-bottom: 20px">发布公司通知 <span class="el-icon-s-open"></span></h2>
        <div class="grid-content">
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                   class="demo-ruleForm">
            <el-form-item label="标题" prop="title">
              <el-input type="text" v-model="ruleForm.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="desc">
              <el-input type="text" v-model="ruleForm.desc" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="内容" prop="content">
              <el-input v-model="ruleForm.content" type="textarea" :autosize="autosize"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="13" class="root-right">
        <div class="show-message">
          <el-table
            height="450"
            :data="tableData"
            style="width: 100%;"
            :default-sort="{prop: 'created', order: 'descending'}"
          >
            <el-table-column
              prop="created"
              label="日期"
              sortable
              width="150">
            </el-table-column>
            <el-table-column
              prop="title"
              label="标题"
              sortable
              width="120">
            </el-table-column>
            <el-table-column
              prop="content"
              label="内容"
            >
            </el-table-column>
            <el-table-column label="操作"
                             width="120"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                >编辑
                </el-button>
                <br>
                <br>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagenation">
          <el-pagination
            small
            layout="prev, pager, next"
            :total="total"
            :page-size="page_size"
            @prev-click="prevfun"
            @next-click="nextfun"
            @current-change="currentchange"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>

    <el-dialog title="更改公司通知" :visible.sync="visited">
      <el-form :model="form">
        <el-form-item label="通知标题" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="通知内容" :label-width="formLabelWidth">
           <el-input v-model="form.content" autocomplete="off" type="textarea" :autosize="autosize"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visited = false">取 消</el-button>
        <el-button type="primary" @click="editmessage">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'AdminCompanyMessageView',
    data () {
      var checkTitle = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('标题不能为空'))
        }
        callback()
      }
      var validateContent = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('内容不能为空！'))
        }
        callback()
      }
      var validateDesc = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('通知描述不能为空'))
        }
        callback()
      }
      return {
        current_page:'',
        form:{
          title:'',
          content:''
        },
         formLabelWidth: '100px',
        visited:false, //控制对话框的弹出
        autosize: { minRows: 4 },
        total: 5, //先设置给初始值，只给空字符串''会报typeerror
        //下一页
        next: '',
        //上一页
        prev: '',
        //每页总数
        page_size: 1,//先设置给初始值，只给空字符串''会报typeerror
        //展示的数据
        tableData: [],
        ruleForm: {
          title: '',
          desc: '',
          content: ''
        },
        rules: {
          title: [
            {
              validator: checkTitle,
              trigger: 'blur'
            }
          ],
          desc: [
            {
              validator: validateDesc,
              trigger: 'blur'
            }
          ],
          content: [
            {
              validator: validateContent,
              trigger: 'blur'
            }
          ]
        }
      }
    },
    mounted () {
      this.get_data()
    },
    methods: {
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios({
              url: this.$settings.base_url + '/user/companymessage/',
              method: 'post',
              data: this.ruleForm
            }).then(res => {
              if (res.data.code === 100) {
                this.$message.success('通知发布成功')
                this.get_data()
                this.resetForm('ruleForm')
              } else {
                this.$message.error('通知发布失败')
              }
            })
          } else {

          }
        })

      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
      },
      get_data (page = 1) {
        this.$axios({
          url: this.$settings.base_url + `/user/companymessage/?page=${page}`,
          method: 'get',
        }).then(res => {
          //获取到用户信息，赋值给变量
          this.tableData = res.data.results
          // this.prev = res.data.links.previous
          // this.next = res.data.links.next
          this.total = res.data.count
          this.page_size = res.data.page_size
        })
      },
      prevfun (value) {
        //value拿到的当前的页码,不用传递，内置的函数，自动传递要前往的页码
        this.get_data(value)
      },
      nextfun (value) {
        //value拿到页码
        this.get_data(value)
      },
      currentchange (value) {
        this.curren_page=value
        this.get_data(value)

      },
      handleEdit (index, row) {
        console.log(row)
        this.visited=true
        this.form=row
      },
      editmessage(){
        var id= this.form.id
        delete this.form.id
        this.$axios({
          url:this.$settings.base_url+`/user/companymessage/?id=${id}`,
          method:'patch',
          data:this.form
        }).then(res=>{
          if(res.data.code===100){
            this.$message.success("更改通知成功！！")
            this.form={}
            this.visited=false
            this.get_data(this.curren_page)
          }else {
            this.$message.error('修改失败')
          }
        })
      },

      handleDelete (index, row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios({
            url: this.$settings.base_url + `/user/companymessage/?pk=${row.id}`,
            method: 'delete',
          }).then(res => {
            if (res.data.code === 100) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.get_data()
            } else {
              this.$message.error('无此数据，无法删除')
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    }
  }
</script>

<style scoped>
  .root-left {
    margin-top: 50px;
    margin-right: 50px;
  }

</style>
